<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <div>
      <div>hello1</div>
      <div>hello2</div>
      <div>hello3</div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
  <script>
    /*
    为什么使用虚拟dom？ 提高性能？
    直接操作页面上的dom，页面会不断的更新，更新dom会造成页面的刷新，很消耗性能，
    虚拟dom是保存在内存中的，dom操作完成之后在页面上只会更新一次，虚拟dom是缓存起来的
    虚拟dom和真实dom之间的转换
    <div></div>   { tag: 'div' }
    <div class="c" title="title"></div>   { tag: 'div', data: { title: 'title', class: 'c' } }
    文本节点 { tag: undefined, value: '文本节点' }
    <div><p>你好</p></div> { tag: 'div', children:[ { tag: 'p',children: [{tag: undefined,value:'你好'}] } ] }
    */

    class VNode {
      constructor(tag, data, value, type) {
        this.tag = tag && tag.toLowerCase();
        this.data = data;
        this.value = value;
        this.type = type;
        this.children = [];
      }
      appendChild(vnode) {
        this.children.push(vnode)
      }
    }

    function getVNode(node) {
      let nodeType = node.nodeType;
      // 根据节点类型1.元素3.文本生成对应的虚拟dom
      let _vnode = null;
      if (nodeType === 1) {
        let nodeName = node.nodeName;
        let attrs = node.attributes;
        let _attrObj = {};
        // 先获取到attrs对象，即虚拟dom中的data属性对象
        for (let i = 0; i < attrs.length; i++) {
          _attrObj[attrs[i].nodeName] = attrs[i].nodeValue;
        }
        _vnode = new VNode(nodeName, _attrObj, undefined, nodeType)
        // 子元素的转换
        let childNode = node.childNodes;
        for (let i = 0; i < childNode.length; i++) {
          _vnode.appendChild(getVNode(childNode[i])) // 递归
        }
      } else if (nodeType === 3) {
        _vnode = new VNode(undefined, undefined, node.nodeValue, nodeType)
      }
      return _vnode;
    }

    let root = document.querySelector('#root')
    let vroot = getVNode(root)
    console.log(vroot)

  </script>
</body>

</html>